<template>
	<div class="zh-user-feedback">
		<nav-header></nav-header>
		<div class="zh-table">
			<div class="zh-table-open clear">
				<div class="zh-open-left fl">
					<div class="open-width">
						<el-select v-model="status" filterable placeholder="请选择">
						    <el-option
						      v-for="item in options"
						      :key="item.value"
						      :label="item.label"
						      :value="item.value">
						    </el-option>
						</el-select>
					</div>
					<div class="open-width">
						<el-input v-model="keyword" placeholder="请输入内容搜索" @keyup.enter.native="searchFunc"></el-input>
					</div>
					<el-button type="primary" @click="searchFunc">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
				<div class="zh-open-right fr">
					<el-button type="danger" @click="deleteMuiltFeedback_confirm">批量删除</el-button>
				</div>
			</div>

			<div class="zh-table-contents"
				v-loading="loading.status"
			    :element-loading-text="loading.txt">
				<el-table
				    :data="feedBackData"
				    @selection-change="tableSelectionChange"
				    border
				    max-height="600"
				    style="width: 100%">
				    <el-table-column
				      type="selection"
				      width="50"
				      align="center"
				      fixed>
				    </el-table-column>
				    <el-table-column
				      prop="number"
				      label="反馈编号"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_name"
				      label="反馈人"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
                        prop="content"
                        label="反馈内容"
                        align="center"
                        show-overflow-tooltip>
				    </el-table-column>
				    <el-table-column
				      prop="email"
				      label="邮箱"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="status_txt"
				      label="状态"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      prop="create_time"
				      label="反馈时间"
				      align="center"
				      show-overflow-tooltip
				      >
				    </el-table-column>
				    <el-table-column
				      label="操作"
				      align="center"
				      width="240">
				      	<template slot-scope="scope">
                            <el-button type="text" v-if="scope.row.picture" @click.stop="checkImg(scope.row)">预览</el-button>
			      	        <el-button @click="changeFeedback_confirm(scope.row,2)" v-if="parseInt(scope.row.status) === 1" type="text">现在处理</el-button>
			      	        <el-button @click="changeFeedback_confirm(scope.row,3)" v-if="parseInt(scope.row.status) === 1 || parseInt(scope.row.status) === 2" type="text">标记为完成</el-button>
			      	        <el-button @click="deleteFeedback_confirm(scope.row)" type="text" class="delete-button">删除</el-button>
			      	    </template>
				    </el-table-column>
				</el-table>

				<div class="table-pagination" v-show="total_number > 10">
					<el-pagination
					    @size-change="handleSizeChange"
					    @current-change="handleCurrentChange"
					    :current-page="feedBackParam.page"
					    :page-sizes="[10, 20, 30, 40, 50, 100]"
					    :page-size="feedBackParam.size"
					    layout="total, sizes, prev, pager, next, jumper"
					    :total="total_number">
					</el-pagination>
					<div class="pagination-button">
						<el-button 
							@click="getList"
							type="primary" icon="el-icon-refresh" 
							circle title="刷新数据" size="mini" >
						</el-button>
					</div>
				</div>
			</div>
		</div>

        <image-viewer
            v-if="imagePreview.showViewer"
            :initial-index="imageIndex"
            :on-close="closeViewer"
            :url-list="imagePreview.previewSrcList">
        </image-viewer>
	</div>
</template>
<script>
  	export default {
	    data() {
		    return {
                imagePreview: {
                    showViewer: false,
                    previewSrcList: []
                },
				feedFlag: false,
		    	loading:{
					status:false,
					txt:'获取数据...',
				},
		    	feedBackParam:{
		    		status:'',
		       		keyword: '',
		       		page:1,
		       		size:10,
		       		data_type:2
				},
				status:'',
		       	keyword: '',
		        selected:[],
		        feedBackData:[],
		        status_arr:{1:'未处理',2:'处理中',3:'已完成'},
		        options: [{
		          value: '',
		          label: '全部状态'
		        }, {
		          value: '1',
		          label: '未处理'
		        }, {
		          value: '2',
		          label: '处理中'
		        }, {
		          value: '3',
		          label: '已完成'
		        }],
				total_number: 0,//共几条
				rowLen: 0,
		    }
		},
		created(){
			this.getList();
        },
        computed: {
            imageIndex() {
                return this.imagePreview.previewSrcList.indexOf(this.imgViewUrl);
            }
        },
		methods: {
			searchFunc(){
				this.feedBackParam.status = this.status;
				this.feedBackParam.keyword = this.keyword;
				this.feedBackParam.page = 1;
				this.getList();
			},
			reset() {
				this.keyword = '';
				this.status = '';
				this.feedBackParam = {
						status:'',
		       	keyword: '',
		       	page:1,
		       	size:10,
		       	data_type:2
				}
					this.getList();
            },
            /**
             * 查看图片
             * @param {Object} obj 记录信息
             */
            checkImg(obj) {
                this.imgViewUrl = this.BASE_URL + obj.picture;
                this.imagePreview.showViewer = true;
                this.imagePreview.previewSrcList = [this.BASE_URL + obj.picture];
            },
            closeViewer() {
                this.imagePreview.showViewer = false;
            },
			//选中
		    tableSelectionChange(val) {
                this.selected = val;
            },
			handleSizeChange(val) {
				this.feedBackParam.page = 1;
		    	this.feedBackParam.size = val;
		    	this.getList();
		    },
		    handleCurrentChange(val) {
		        this.feedBackParam.page = val;
		        this.getList();
		    },
		    getList(){
		    	this.loading.status = true;
		    	// 重写成功回调
				let success = ( data => {
					this.loading.status = false;
					this.feedBackData = data.data.data;
					this.total_number = data.data.data_sum;
					for (var i = this.feedBackData.length - 1; i >= 0; i--) {
						this.feedBackData[i].number = PrefixInteger(this.feedBackData[i].id,7);
						this.feedBackData[i].status_txt = this.status_arr[parseInt(this.feedBackData[i].status)];
					}
				});
				let fail = ( data => {
					this.loading.status = false;
					this.$message.error( data.msg )
				})
  				this.$ajax.get('api/user/user_feedback',{params:this.feedBackParam,func:{success:success,fail:fail}})
		    },
		    changeFeedback_confirm(obj,status){
				let yes = ( data => {
					this.changeFeedback(obj.id,status);
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定将 '+obj.number+' 标记为 '+this.status_arr[parseInt(status)]+' 吗？'});

			},
		    changeFeedback(id,status){
		    	let success = ( data => {
					this.$message.success(data.msg);
					
					if (this.feedBackData.length - this.rowLen === 0) {
						if (this.feedBackParam.page > 1) {
							this.feedBackParam.page--;
						} else {
							this.feedBackParam.page = 1;
						}
					}

					this.getList();
				});
		    	this.$ajax.put('api/user/change_feedback',{id:id,status:status},{func:{success:success}})
		    },
		    deleteFeedback_confirm(obj){
				let yes = ( data => {
					this.rowLen = 1;
					this.changeFeedback(obj.id,0);
				})
				// let cancel = ( data => {})
				this.e_confirm({yes:yes,txt:'确定将 '+obj.number+' 删除吗？'});

			},
			deleteMuiltFeedback_confirm(){
				if( this.selected.length === 0 ) {
					this.$message.warning("请选择要删除的项");
					return false;
				}
				this.rowLen = this.selected.length;
				let yes = ( data => {
					this.deleteMuiltFeedback();
				})
				let cancel = ( data => {})
				this.e_confirm({yes:yes,cancel:cancel,txt:'确定要删除选中的项吗？'});

			},
			deleteMuiltFeedback(){
				var ids = [];
				for (var i = this.selected.length - 1; i >= 0; i--) {
					ids.push(this.selected[i].id)
				}
				this.changeFeedback(ids,0);
			}
		    
		},
  	}
</script>
<style lang="scss">
	.zh-user-feedback {
		// .el-table__body-wrapper table tbody {
		// 	td:nth-child(8) {
		// 		padding: 0;
		// 	}
		// }
		.feed-text {
			cursor: pointer;
			&:hover {
				color: #409eff;
			}
		}
		.el-dialog__body {
			padding: 30px;
			overflow: hidden;
			.feed-content {
				word-break: break-all;
				white-space: normal;
				text-indent: 2em;
				overflow: hidden;
			}
			.feed-picture {
				text-align: center;
				cursor: pointer;
				overflow: hidden;
			}
		}
	}
</style>